<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lighthouse</title>
    <style>
      @keyframes grow {
        from {
          /**transform: scaleY(0);**/
          height: 200px;
        }
        to {
          /**transform: scaleY(2);**/
          height: 500px;
        }
      }
      #banner {
        animation: grow 3s infinite;
      }
    </style>
  </head>

  <body>
    <img id="banner" style="width: 500px; height: 300px" src="https://p6-passport.byteacctimg.com/img/user-avatar/fda0cc3accef936f674e0d3a1ae6cca0~300x300.image" /><br />
    <img src="https://p6-passport.byteacctimg.com/img/user-avatar/fda0cc3accef936f674e0d3a1ae6cca0~300x300.image" />
    <script>
      function perf() {
        var data = {
          url: window.location.href,
          FP: 0,
          FCP: 0,
          LCP: 0,
          FID: 0,
          CLS: 0,
        };
        new PerformanceObserver(function (entryList) {
          var entries = entryList.getEntries() || [];
          entries.forEach(function (entry) {
            if (entry.name === "first-paint") {
              data.FP = entry.startTime;
              console.log("记录FP: " + data.FP);
            } else if (entry.name === "first-contentful-paint") {
              data.FCP = entry.startTime;
              console.log("记录FCP: " + data.FCP);
            }
          });
        }).observe({ type: "paint", buffered: true });

        new PerformanceObserver(function (entryList) {
          var entries = entryList.getEntries() || [];
          entries.forEach(function (entry) {
            if (entry.startTime > data.LCP) {
              console.log("记录LCP: " + (data.LCP = entry.startTime));
            }
          });
        }).observe({ type: "largest-contentful-paint", buffered: true });
        new PerformanceObserver((entryList) => {
          for (const entry of entryList.getEntries()) {
            const FID = entry.processingStart - entry.startTime;
            console.log("记录FID:", FID, entry);
          }
        }).observe({ type: "first-input", buffered: true });
        new PerformanceObserver((entryList) => {
          var entries = entryList.getEntries() || [];
          entries.forEach(function (entry) {
            if (!entry.hadRecentInput) {
              data.CLS += entry.value;
              // console.log("CLS: " + data.CLS);
            }
          });
        }).observe({ type: "layout-shift", buffered: true });
      }
      if (
        document.readyState === "complete" ||
        document.readyState === "interactive"
      ) {
        perf();
      } else {
        document.addEventListener("readystatechange", function () {
          if (document.readyState === "complete") {
            perf();
          }
        });
      }
    </script>
  </body>
</html>
